<ng-container *ngIf="httpService.devType">

  <nz-carousel [nzEffect]="effect" [nzDots]="banner.length>1" [nzAutoPlay]="true" [nzAutoPlaySpeed]="3000"
               *ngIf="banner.length">
    <div nz-carousel-content *ngFor="let index of banner"
         style="cursor: pointer;">
      <div *ngIf="index.courseId" [routerLink]="'../vd/'+index.courseId">
        <img [src]="index.imageUrl" style="display: block;width: 100%;">
      </div>
      <a *ngIf="!index.courseId && index.link" [href]="index.link" style="display: block;">
        <img [src]="index.imageUrl" style="display: block;width: 100%;">
      </a>
      <div *ngIf="!index.courseId && !index.link">
        <img [src]="index.imageUrl" style="display: block;width: 100%;">
      </div>
    </div>
  </nz-carousel>


  <div class="vd-wrapper" style="background: #f2f2f2">
    <div class="vd-classify-wrapper" >
      <h1>职业菜单</h1>
      <div
        #vdwrapper
        class="vd-classify"
        style="padding: 12px 31px;background: white ;border-radius: 3px"
      >
        <span (click)="getCoursesList(type.id)" *ngFor="let type of typeList"
              [attr.title]="type.name" [ngClass]="{'checked': selectedId === type.id}">{{type.name}}</span>
      </div>
    </div>


    <div class="vd-box" style="background: #f2f2f2;padding-top: 2vw !important;">
      <div class="vd-box-header" style="margin-bottom: 20px">
        <ul style="display: flex; justify-content: space-between; width: 450px;font-size: 16px">
          <li [ngClass]="{'li-select-active':menuSelect === 0}" class="li-select" (click)="changSelect(0)">本专业方向</li>
          <li [ngClass]="{'li-select-active':menuSelect === 1}" class="li-select" (click)="changSelect(1)">跨专业方向</li>
          <li [ngClass]="{'li-select-active':menuSelect === 2}" class="li-select" (click)="changSelect(2)">不限专业方向</li>
        </ul>

      </div>
      <nz-list [nzDataSource]="showData?.currentData" [nzGrid]="{ gutter: 16, sm: 12, md: 8, lg: 6 }"
               [nzRenderItem]="item">
        <ng-template #item let-item>
          <nz-list-item [nzContent]="nzContent">
            <ng-template #nzContent>
              <app-vditem [data]="item"></app-vditem>
            </ng-template>
          </nz-list-item>
        </ng-template>
      </nz-list>
    </div>

    <!--<div class="li-loading-more">-->

      <!--<button nz-button nzSize="large" nzType="primary">暂无更多</button>-->
    <!--</div>-->

    <!--广告位-->
    <!--广告位-->
    <!--广告位-->

    <a class="vd-box" style="background: #f2f2f2;text-align: center;overflow: hidden" (click)="httpService.prevent($event,professionAdList[0]?.link)" *ngIf="professionAdList.length>0" [href]="professionAdList[0]?.link" target="_blank">
      <img alt="" style="margin-left: auto" class="li-ad-img shadow-box" [src]="professionAdList[0]?.imageUrl">
    </a>

  </div>

</ng-container>


<ng-container *ngIf="!httpService.devType">

  <nz-carousel [nzEffect]="effect" [nzDots]="false" [nzAutoPlay]="true" [nzAutoPlaySpeed]="3000" (nzBeforeChange)="changePro($event)">
    <div nz-carousel-content *ngFor="let index of banner"
         style="cursor: pointer;">
      <div *ngIf="index.courseId" [routerLink]="'../vd/'+index.courseId">
        <img [src]="index.imageUrl" style="display: block;width: 100%;height: 175px;">
      </div>
      <a *ngIf="!index.courseId && index.link" [href]="index.link" style="display: block;">
        <img [src]="index.imageUrl" style="display: block;width: 100%;height: 175px;">
      </a>
      <div *ngIf="!index.courseId && !index.link">
        <img [src]="index.imageUrl" style="display: block;width: 100%;height: 175px;">
      </div>
    </div>
  </nz-carousel>

  <div *ngIf="banner.length>1" class="dots_box" style="margin-top: -20px;position: absolute;z-index: 100;width: 100%;text-align: center">
    <p *ngFor="let item of banner; let i = index" [class]="dotP==i?'activeP':''"></p>
  </div>
  <!--<div style="padding-top: 40px;padding-left: 17px;padding-bottom:20px;color: #222;text-align: left">-->
    <!--<h1 style="font-size: 23px;">职业菜单</h1>-->
  <!--</div>-->
  <div class="mb-classify-wrapper">
    <ul class="mb-classify vd-classify" style="background: #fff;margin: 25px 15px 0;box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.1);">
      <li *ngFor="let type of classifySplit()" [ngClass]="{'checked': selectedId === type.id}"
        (click)="getCoursesList(type.id)">
        <a>{{type.name}}</a></li>
        <li *ngIf="typeList.length > 12" (click)="open()"><a>全部</a></li>
    </ul>
    <!-- <div class="vd-moreClassify" *ngIf="typeList.length > 18">
      <a (click)="open()">更多<i nz-icon nzType="down-square"
          nzTheme="outline"></i></a>
    </div> -->
  </div>
  <div class="mb-box-wrapper">
    <div class="vd-box-header" style="margin-bottom: 20px;margin-top: 20px">
      <ul style="display: flex; justify-content: space-between;padding: 0 15px">
        <li [ngClass]="{'li-select-active':menuSelect === 0}" class="li-select" (click)="changSelect(0)">本专业方向</li>
        <li [ngClass]="{'li-select-active':menuSelect === 1}" class="li-select" (click)="changSelect(1)">跨专业方向</li>
        <li [ngClass]="{'li-select-active':menuSelect === 2}" class="li-select" (click)="changSelect(2)">不限专业方向</li>
      </ul>

    </div>
    <div style="padding: 0 15px">
      <nz-list [nzDataSource]="showData?.currentData" [nzRenderItem]="item"
        [nzGrid]="{ gutter: 10, xs: 12 }">
        <ng-template #item let-item>
          <nz-list-item [nzContent]="nzContent">
            <ng-template #nzContent>
              <app-vditem [data]="item" [devType]="httpService.devType"></app-vditem>
            </ng-template>
          </nz-list-item>
        </ng-template>
      </nz-list>
      <div style="text-align: center" *ngIf="professionList?.data.length>12 && professionList?.currentData.length<=12">
        <button nz-button (click)="mbPagination(blockType.professionList)" nzType="default"
                 style="margin: 30px 0;background: #D10000;color: #fff;">加载更多
        </button>
      </div>
      <div *ngIf="professionAdList[0]?.link===null || professionAdList[0]?.link==='null'">
        <img style="width: 100%;height: 70px;margin: 30px 0" [src]="professionAdList[0]?.imageUrl" alt="图片">
      </div>
      <a *ngIf="professionAdList[0]?.link!==null || professionAdList[0]?.link==='null'" [href]="professionAdList[0]?.link" target="_blank" style="overflow-x: scroll;display: block">
        <img style="width: 100%;height: 70px;margin: 30px 0" [src]="professionAdList[0]?.imageUrl" alt="图片">
      </a>
    </div>
  </div>

  <div *ngIf="visible" class="mb-fxied">
    <h1>课程分类<i (click)="close()" nz-icon nzTheme="outline" nzType="close" style="float: right;"></i></h1>
    <ul class="mb-classify vd-classify" style="max-height: initial;">
      <li (click)="getCoursesList(type.id)" *ngFor="let type of typeList"
          [ngClass]="{'checked': selectedId === type.id}">
        <a>{{type.name}}</a></li>
    </ul>
  </div>
</ng-container>
